<!--  -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>故障统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../../css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="../../css/app.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
    <link rel="stylesheet" href="../../css/iconfont.css" />
    <style>
        .mui-card .mui-control-content {
            padding: 10px;
        }

        /*自定义样式*/
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        a{
            color: #ffffff;
        }
        .mui-content{
            width: 100%;
            height: 100%;
            background: #ffffff;
        }
        .mui-bar{
            background:#4F77AA ;
            color: #ffffff;
            -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
            box-shadow: 0 0 1px rgba(0,0,0,0);
        }
        .mui-title{
            color: #ffffff;
        }
        .mui-content .mui-content-item{
            width:100%;
            height:calc(100% - 38px);
        }
        .mui-content .mui-content-item .mui-control-content{
            width: 100%;
            height:100%;
        }
        .bottom_submit{
            position: absolute;
            width: 100%;
            height: 48px;
            text-align: center;
            line-height: 48px;
            bottom: 0;
            background: #4F77AA;
        }
        input[type=submit]#submit{
            width:100%;
            height:48px;
            line-height: 48px;
            background:#4F77AA ;
            border:none;
            padding: 0;
        }
        
        .mui-input-row label~textarea{
            border:1px solid #c8c7cc;
            width: 60%;
            margin-right: 5%;
        }
        .mui-select-content{
            width:100%;
            height:41px;
            background: #EFEFF4;
        }
        .mui-select{
            width:80%;
            float:left;
        }
        .mui-select select{
            width:100%;
            background: #EFEFF4;
            border-radius: 0;
        }
        .mui-select-content .add_button{
            width: 20%;
            float: right;
            height: 41px;
            text-align: center;
            line-height: 41px;
        }
        .mui-select-content .add_button input{
            display: inline-block;
            width:100%;
            height:100%;
            background: #4f77aa;
            color:#ffffff;
        }
        .mui-control-content .add_detailed{
            width: 20%;
            float: right;
            height: 41px;
            text-align: center;
            line-height: 41px;
        }
        .mui-control-content .add_detailed input{
            display: inline-block;
            width:100%;
            height:100%;
            background: #4f77aa;
            color:#ffffff;
        }
        .mui-ellipsis-title{
            color:#4f77aa;
        }
        .mui-popup-title{
            text-align: left;
        }
        .mui-ellipsis span{
            font-size: 24px;
            padding-left: 25px;
            color:#f8ac59;
        }
        .mui-table-view-cell p{
            padding:5px 0;
        }
        .clear{
            clear: both;
        }
        .mui-content-item .line_x{
            width: 100%;
            height: 8px;
            background: #EFEFF4;
        }
        .mui-input-group input, .mui-input-group textarea{
            border: 1px solid #dddddd;
        }
        .charts{
        	border-bottom: 1px solid #dddddd;
        }
        .charts_title_item{
				height: 40px;
				line-height: 40px;
				border-bottom: 2px solid #dae0e8;
			    border-top-left-radius: 2px;
			    border-top-right-radius: 2px;
			    background: #EFEFF4;
			    padding-left: 10px;
			    font-size: 14px;
			    font-weight: 600;
			    text-align: left;
			}
		.mui-segmented-control{
			border: none;
			background: #fafbfc;	
			}
		.mui-segmented-control .mui-control-item{
			border: none;
		}	
        .table_title{
            padding: 10px 15px;
        }
        table.table {
            border: 1px solid #cad9ea;
            color: #666;
            width: calc(100% - 20px);
            margin-left: 10px;
            margin-top: 10px;
        }	
        .table th {
            background: #81A2C5;
        }
        .table td,.table th{
            border: 1px solid #cad9ea;
            padding: 10px;
            text-align: center;
            color: #000000;
            font-size: 14px;
        }
        .table_list table th{
            color: #ffffff;
        }
    </style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
    <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
    <h1 class="mui-title">故障统计</h1>
</header>
<div class="mui-content">
        <!-- <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
            <a class="mui-control-item mui-active" href="#item1">基础信息</a>
            <a class="mui-control-item" href="#item2">接单明细</a>
            <a class="mui-control-item" href="#item3">更换配件</a>
        </div> -->
        <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-primary">
			<a class="mui-control-item mui-active" href="#item1">今日</a>
			<a class="mui-control-item" href="#item2">本周</a>
			<a class="mui-control-item" href="#item3">本月</a>
			<a class="mui-control-item" href="#item3">近6月</a>
		</div>
    <div class="mui-content-item">
        <div id="item1" class="mui-control-content mui-active">
            <!-- <div id="scroll" class="mui-scroll-wrapper">
                <div class="mui-scroll"> -->
                   <div class="charts">
						<div class="charts_title_item col-12">CF2车间</div>
						<div  id="chart1" class="chartBox col-12" style="height: 250px;">
					   </div>
                    </div>
                    <div class="table_list" style="width:365px;overflow:scroll;white-space: nowrap;text-overflow: ellipsis;">
                        <div class="table_title">请选择需要查看的信息！</div>
                         <table class="table" style="padding:10px 10px;">
                            <tbody><tr>
                                <th width="20%">部门名称</th>
                                <th>故障总数</th>
                                <th>及时修复</th>
                                <th>响应超时</th>
                            </tr>
                            <tr>
                                <td>CF1车间</td>
                                <td>6</td>
                                <td>0</td>
                                <td>6</td>
                            </tr>
                             <tr>
                                <td>CF2车间</td>
                                <td>2</td>
                                <td>0</td>
                                <td>2</td>
                            </tr>
                             <tr>
                                <td>CF3车间</td>
                                <td>6</td>
                                <td>0</td>
                                <td>6</td>
                            </tr>
                        </tbody>
                        </table>              
                    </div>
					
			
               <!--  </div>
            </div> -->
        </div>
        <div id="item2" class="mui-control-content">
            <div id="scroll1" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell mui-media">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title' style="width:75%;float:left;">接单人：杨洋</p>
                                <div class="add_detailed"><input type="button" value="添加" id="add_detailed"></div>
                                <div class="clear"></div>
                                <p class='mui-ellipsis'>开始时间：2015-10-10 10:10</p>
                                <p class='mui-ellipsis'>结束时间：2015-10-10 10:10</p>
                                <p class=''>工作描述：意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器...</p>
                            </div>
                        </li>
                        <li class="mui-table-view-cell mui-media">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title'>接单人：杨洋</p>
                                <p class='mui-ellipsis'>开始时间：2015-10-10 10:10</p>
                                <p class='mui-ellipsis'>结束时间：2015-10-10 10:10</p>
                                <p class=''>工作描述：意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器...</p>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div id="item3" class="mui-control-content">
            <div id="scroll2" class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <div class="mui-select-content">
                        <div class="mui-select">
                            <select class="mui-h5 add_sparepart" style="margin:auto; color:#000;">
                                <option value="">--请选择备件仓库--</option>
                                <option value="1">成都仓库</option>
                                <option value="1">接单件库</option>
                            </select>
                        </div>
                        <div class="add_button"><input type="button" value="添加" id="add_sparepart"></div>
                    </div>
                    <ul class="mui-table-view">
                        <li class="mui-table-view-cell mui-media" onclick="sparepartNumber(0,this)">
                            <div class="mui-media-body">
                                <p class='mui-ellipsis mui-ellipsis-title'>CK-20190827001</p>
                                <p class='mui-ellipsis'>备件编码：0135</p>
                                <p class='mui-ellipsis'>规格型号：30*50*1</p>
                                <p class='mui-ellipsis'>使用数量：<span class="add_sum color-primary iconfont icon-tianjia1"></span><span class="use_sum">10</span><span class="reduce_sum color-primary iconfont icon-jianshao"></span></p>
                            </div>
                        </li>


                    </ul>


                </div>
            </div>
        </div>

    </div>
</div>
<script src="../../js/jquery-1.11.3.js"></script>
<script src="../../js/echarts.js"></script>
<script src="../../js/mui.min.js"></script>

<script>
    mui('body').on('tap','a',function(){
        window.top.location.href=this.href;
    });
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    (function($) {
        $('#scroll').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll1').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll2').scroll({
            indicators: true //是否显示滚动条
        });
        $('#scroll3').scroll({
            indicators: true //是否显示滚动条
        });

        $.init();
    
    })(mui);
   	$(document).ready(function(){
   		  var myChart1 = echarts.init(document.getElementById('chart1'));
         var data1 = [6, 3, 6, 3];
         var datacity = ['故障总数', '及时修复', '暂不维修', '未完成'];
         var option = {
             color: ['#31C6E7', '#65E1E1', '#E5DB6F', '#DF63AC'],
             tooltip: {
                 trigger: 'axis',
             },
             legend: {

                 top: '8%',
                 data: ['数量', '及时修复', '暂不维修', '未完成'],
             },
             grid: { //图表的位置
                 top: '20%',
                 left: '3%',
                 right: '4%',
                 bottom: '5%',
                 containLabel: true
             },
             yAxis: [{
                 type: 'value',
                 axisLabel: {
                     show: true,
                     interval: 'auto',
                     formatter: '{value} '
                 },
                 splitLine: {
                     show: true,
                     lineStyle: {
                         type: 'dashed'
                     }
                 },
                 show: true

             }],
             xAxis: [{
                 type: 'category',
                 axisLabel: {
                     interval: 0,
                     show: true,
                     splitNumber: 15,
                     textStyle: {
                         fontSize: 13,
                         color: '#000'
                     },

                 },
                 data: datacity,
             }],
             series: [{
                     name: '',
                     type: 'bar',
                     stack: 'sum',
                     barWidth: '30px',
                    itemStyle: {
                        normal: {
                            //每根柱子颜色设置
                            color: function(params) {
                                let colorList = ['#31C6E7', '#65E1E1', '#E5DB6F', '#DF63AC'];
                                return colorList[params.dataIndex];
                                    }
                                }
                            },
                     data: data1

                 }
                
              
             ]
         };
         myChart1.setOption(option);
   	})
    $(document).on("click","span.mui-pull-left",function(){
        window.location.href="../../../index.html";
    })
   
</script>

</body>

</html>


